<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>005-拖拽传递数据.html</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#target{
			width: 100px;
			height: 100px;
			background-color: red;
		}
		#container{
			width: 400px;
			height: 400px;
			background-color: #ff6670;
		}
		.father{
			width: 450px;
			height: 450px;
			background-color: #FF001;
		}
		.son{
			width: 300px;
			height: 300px;
			background-color: #ff9650;
		}
	</style>
</head>
<body>
	<div id="container"></div>
	<div id="target" draggable="true"></div>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script>
	$(function(){
		
		$('#target')
		.on('dragstart',function(ev){
			//当元素开始拖动时触发
			// console.log('container::dragstart')
			console.log(ev.target)
			console.log(ev.currentTarget)
		})
		
		$('#container')
		.on('drag',function(){
			//被拖动元素拖动时触发
			// console.log('target::drag')
		})
		.on('dragend',function(){
			//拖拽时松开鼠标时触发
			console.log('target::dragend')
		})


		$('#container')
			.on('drop',function(ev){
				//当放置被拖动元素时触发
				//console.log('container::drop')
				$(this).append($('#target'))
			})
			.on('dragover',function(ev){
				//被拖动元素正在到放置到容器时触发，默认无法把元素放置到其他元素中，如果需要设置允许设置，我们必须阻止对元素的默认处理方式
				//console.log('container::dragover')
				ev.preventDefault()
			})
			.on('dragenter',function(){

			})
			.on('dragleave',function(){

			})
			.on('dragend',function(){
				// console.log('container::dragend')
			})
	})
</script>
</html>